<template>
  <div class="car-container">
    <div class="car-text">
      <el-card class="box-card">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row :gutter="80">
            <el-col
              :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="车型编号:">
                <el-input placeholder="请输入车型编号" />
              </el-form-item></div></el-col>
            <el-col
              :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="应载重量:" prop="selectedOption">
                <!-- <el-input placeholder="请输入应载重量" /> -->
                <el-select v-model="form.selectedOption" placeholder="请输入应载重量">
                  <el-option :value="1" label="小于1.8(吨)" />
                  <el-option :value="2" label="1.8-6(吨)" />
                  <el-option :value="3" label="6-14(吨)" />
                  <el-option :value="4" label="14-30(吨)" />
                  <el-option :value="5" label="30-50(吨)" />
                  <el-option :value="6" label="50-100(吨)" />
                  <el-option :value="7" label="100>(吨)" />
                </el-select>
              </el-form-item></div></el-col>
            <el-col
              :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="应载体积:">
                <el-select v-model="form.volume" placeholder="请输入应载体积">
                  <el-option :value="1" label="小于3(m³）)" />
                  <el-option :value="2" label="3-5(m³)" />
                  <el-option :value="3" label="5-10(m³)" />
                  <el-option :value="4" label="10-15(m³)" />
                  <el-option :value="5" label="15-30(m³)" />
                  <el-option :value="6" label="30-50(m³)" />
                  <el-option :value="7" label="50-80(m³)" />
                  <el-option :value="8" label="80-150(m³)" />
                  <el-option :value="9" label="150>(m³)" />
                </el-select>
              </el-form-item></div></el-col>
            <el-col
              :span="8"
            ><div class="grid-content bg-purple">
              <el-form-item label="车辆类型:">
                <el-input placeholder="请输入车辆类型" />
              </el-form-item></div></el-col>
            <el-col
              :span="8"
            ><div class="grid-content bg-purple" style="margin-top: -8px">
              <el-button type="danger" style="width: 100px">搜索</el-button>
              <el-button style="width: 100px">重置</el-button>
            </div></el-col>
          </el-row>
        </el-form>
      </el-card>
    </div>
    <div class="car-bottom">
      <el-card class="box-bottom">
        <el-button type="danger" style="width: 100px">新增车型</el-button>
        <template>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="index" label="序号" width="80" />
            <el-table-column prop="id" label="车辆编号" show-overflow-tooltip />
            <el-table-column prop="name" label="车辆类型" />
            <el-table-column prop="num" label="车型数量" />
            <el-table-column prop="allowableLoad" label="应载重量(吨)" />
            <el-table-column prop="allowableVolume" label="应载体积(立方米)" width="180" />
            <el-table-column prop="measureLong" label="长(米)" width="80" />
            <el-table-column prop="measureWidth" label="宽(米)" width="80" />
            <el-table-column prop="measureHigh" label="高(米)" width="80" />
            <el-table-column label="操作">
              <template v-slot="{row}">
                <el-button type="text" style="fonst-size:12px" @click="bianji(row)">编辑</el-button>
                <el-button type="text" style="fonst-size:12px;color:red">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <el-row type="flex" justify="center" style="margin-top:15px">
          <el-pagination
            :current-page="page"
            background
            :page-sizes="[3, 4, 5, 6,7]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>

      </el-card>

    </div>
  </div>
</template>

<script>
import { getCarType } from '@/api/car'
// import { get } from 'js-cookie'
export default {
  data() {
    return {
      total: 0,
      page: 1,
      pageSize: 3,
      form: {
        selectedOption: '', // 应载重量
        volume: ''
      },
      tableData: []
    }
  },
  created() {
    this.getCarType()
  },
  methods: {
    async getCarType() {
      const res = await getCarType({ page: this.page, pageSize: this.pageSize })
      console.log(res)
      this.total = +res.data.counts
      this.tableData = res.data.items
      this.tableData.forEach((item, index) => {
        item.index = index + 1
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.page = 1
      this.getCarType()
    },
    handleCurrentChange(page) {
      this.page = page
      this.getCarType()
    },
    bianji(row) {
      console.log(row)
    }
  }
}
</script>

<style lang="scss" scoped>
.car-container {
  margin-top: 40px;
  padding: 20px;
  .car-text {
    font-size: 30px;
    line-height: 46px;
    .box-card {
      border-radius: 8px;
    }
  }
  .car-bottom {
    margin-top: 20px;
    .box-bottom {
      background-color: #fff;
      border-radius: 8px;
    }
  }
}
</style>
